%%{init: {'themeVariables': { 'fontSize': '12px'}}}%%
graph TD
    classDef path fill:#eee,stroke:#000,color:#000
    classDef plan fill:#fff,stroke-width:1px,color:#000
    classDef itemplan fill:#fff,stroke-width:2px,color:#000
    classDef unbatchedplan fill:#dff,stroke-width:1px,color:#000
    classDef sideeffectplan fill:#fcc,stroke-width:2px,color:#000
    classDef bucket fill:#f6f6f6,color:#000,stroke-width:2px,text-align:left

    subgraph "Buckets for mutations/withPgClient/multipleActions"
    Bucket0("Bucket 0 (root)"):::bucket
    Bucket1("Bucket 1 (mutationField)<br />Deps: 12, 15"):::bucket
    Bucket2("Bucket 2 (nullableBoundary)<br />Deps: 9<br /><br />ROOT SideEffectWithPgClient{1}[9]"):::bucket
    Bucket3("Bucket 3 (listItem)<br /><br />ROOT __Item{3}ᐸ9ᐳ[13]"):::bucket
    end
    Bucket0 --> Bucket1
    Bucket1 --> Bucket2
    Bucket2 --> Bucket3

    %% plan dependencies
    Object12{{"Object[12∈0] ➊<br />ᐸ{pgSettings,withPgClient}ᐳ"}}:::plan
    Access10{{"Access[10∈0] ➊<br />ᐸ2.pgSettingsᐳ"}}:::plan
    Access11{{"Access[11∈0] ➊<br />ᐸ2.withPgClientᐳ"}}:::plan
    Access10 & Access11 --> Object12
    __Value2["__Value[2∈0] ➊<br />ᐸcontextᐳ"]:::plan
    __Value2 --> Access10
    __Value2 --> Access11
    SideEffectWithPgClient9[["SideEffectWithPgClient[9∈1] ➊<br />More deps:<br />- Constantᐸ§{ a: 3 }ᐳ[15]"]]:::sideeffectplan
    Object12 --> SideEffectWithPgClient9
    __Item13[/"__Item[13∈3]<br />ᐸ9ᐳ"\]:::itemplan
    SideEffectWithPgClient9 ==> __Item13

    %% define steps
    classDef bucket0 stroke:#696969
    class Bucket0,__Value2,Access10,Access11,Object12 bucket0
    classDef bucket1 stroke:#00bfff
    class Bucket1,SideEffectWithPgClient9 bucket1
    classDef bucket2 stroke:#7f007f
    class Bucket2 bucket2
    classDef bucket3 stroke:#ffa500
    class Bucket3,__Item13 bucket3

